<template>
    <div class="left">
        <div v-for="item in leftList" :key="item.id">
            <div>
                <p>id: {{ item.id }}</p>
                <p>title: {{ item.title }}</p>
                <p>create Date: {{ item.cDate }}</p>
            </div>
            <!-- <button @click="toRight(item.id)">ADD</button> -->
            <button @click="move(item.id, 'leftList', 'rightList')">ADD</button>
        </div>
    </div>
    <div class="right">
        <div v-for="item in rightList" :key="item.id">
            <div>
                <p>id: {{ item.id }}</p>
                <p>title: {{ item.title }}</p>
                <p>create Date: {{ item.cDate }}</p>
            </div>
            <!-- <button @click="toLeft(item.id)">REMOVE</button> -->
            <button @click="move(item.id, 'rightList', 'leftList')">REMOVE</button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            leftList: [
                {
                    id: 1,
                    title: "标题1",
                    cDate: "1124",
                },
                {
                    id: 2,
                    title: "标题2",
                    cDate: "1024",
                },
            ],
            rightList: [
                {
                    id: 3,
                    title: "标题3",
                    cDate: "0924",
                },
            ],
        };
    },
    methods: {
        move(id, source, target) {
            // 1. 找到要移动的元素, 移动到对应的数组
            this[source].forEach((item) => {
                if (item.id === id) {
                    this[target].push(item);
                }
            });
            // 2. 找到已经移动过的元素, 将他删除
            this[source] = this[source].filter((item) => item.id !== id);
        },
        // toRight(id) {
        //     // 1. 找到要移动的元素, 移动到对应的数组
        //     this.leftList.forEach((item) => {
        //         if (item.id === id) {
        //             this.rightList.push(item);
        //         }
        //     });
        //     // 2. 找到已经移动过的元素, 将他删除
        //     this.leftList = this.leftList.filter((item) => item.id !== id);
        // },
        // toLeft(id) {
        //     // 1. 找到要移动的元素, 移动到对应的数组
        //     this.rightList.forEach((item) => {
        //         if (item.id === id) {
        //             this.leftList.push(item);
        //         }
        //     });
        //     // 2. 找到已经移动过的元素, 将他删除
        //     this.rightList = this.rightList.filter((item) => item.id !== id);
        // },
    },
};
</script>

<style scoped>
.left,
.right {
    width: 300px;
    height: 400px;
    background-color: #484646;
    padding: 10px;
    position: absolute;
    top: 50px;
}

.left > div,
.right > div {
    width: 100%;
    height: 120px;
    background-color: white;
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
}

.left {
    left: 30px;
}
.right {
    left: 430px;
}
</style>
